<template>
	<e-charts class="chart1" style="width: 100%; height: 90vh;" :option="option" />
	<e-charts class="chart2" style="width: 100%; height: 400px;" :option="option2" />
</template>

<script setup>
	import {
		onMounted,
		ref
	} from "vue"

	import {
		ordersTotal,
		unitAverageMaintenance

	} from "@/api"

 
 
 
	const username = ref('')
 

	// 处理数据函数（保持不变）
	function processChartData(data) {
		const filterKeys = ['维保类型', '维保单位'];
		const companies = Object.keys(data['单位维保工单总数'])
			.filter(key => !filterKeys.includes(key))
			.map(key => key.trim());

		const maintenanceData = companies.map(company =>
			data['单位维保工单总数'][company] || 0
		);

		const repairData = companies.map(company =>
			data['单位维修工单总数'][company] || 0
		);

		return {
			companies,
			maintenanceData,
			repairData
		};
	}

	// 生成横向柱状图配置
	function generateHorizontalChartOption(processedData) {
		return {
			title: {
				text: '维保单位工单统计',
				subtext: '按单位统计维保和维修工单数量',
				left: 'center',
				padding: [20, 0, 20, 0], // [上, 右, 下, 左]
				textStyle: {
					fontSize: 18, // 增大主标题字体
					fontWeight: 'bold',
					color: '#ffffff' // 如果希望强制设置图例文字颜色，可以取消注释
				},
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			legend: {
				data: ['维保工单', '维修工单'],
				top: '7%',
				  textStyle: {
				            fontSize: 12,
				            color: '#ffffff' // 如果希望强制设置图例文字颜色，可以取消注释
				        }
			},
			// grid: {
			//     left: '20%', // 为y轴标签留更多空间
			//     right: '5%',
			//     bottom: '3%',
			//     containLabel: true
			// },
			// 调换xAxis和yAxis
			yAxis: {
				type: 'category',
				data: processedData.companies,
				axisLabel: {
					interval: 0,
					fontSize: 10,
					margin: 10 // 增加标签与轴线的距离
				},
				axisTick: {
					alignWithLabel: true // 使刻度线与标签对齐
				},
				   axisLabel: {
				            color: '#ffffff', // 设置为红色（支持 HEX/RGB/颜色名称）
				            fontSize: 12,    // 可选：调整字体大小
				            fontWeight: 'bold' // 可选：加粗
				        }
				
			},
			  grid: {
			            left: '1%',
			            // right: '5%',
			            top: '11%', // 将图表主体下移，给标题更多空间
			            bottom: '3%',
			            containLabel: true
			        },
			xAxis: {
				type: 'value',
				name: '工单数量',
				axisLabel: {
					formatter: '{value}' // 可以自定义格式
				},
				
				
			},
			series: [{
					name: '维保工单',
					type: 'bar',
					data: processedData.maintenanceData,
					itemStyle: {
						color: '#5470C6'
					},
					label: {
						show: true,
						position: 'right', // 在柱子右侧显示数值
						formatter: '{c}' // 显示原始值
					}
				},
				{
					name: '维修工单',
					type: 'bar',
					data: processedData.repairData,
					itemStyle: {
						color: '#91CC75'
					},
					label: {
						show: true,
						position: 'right',
						formatter: '{c}'
					}
				}
			]
		};
	}

 
	const init = () => {
		ordersTotal(username.value).then((res) => {
			 
			const data = res.data
				const processedData = processChartData(data);
				option.value = generateHorizontalChartOption(processedData);
		});
	};

	// })

	// unitAverageMaintenance().then(r => {
	// 	console.log(666, r)
	// 	option1.value.series[0].data = Object.entries(r.data.单位平均维修工单数).map(([name, value]) => ({
	// 		value,
	// 		name
	// 	}));
	// })

	onMounted(() => {
		username.value = localStorage.getItem('username')
		 
		init(username.value)
	})
</script>

<style scoped>
	.chart1 {
		width: 1563px;
		height: 860px;
	}
</style>